$(function(){
    var myIndex = 0; //小圆点初始的索引默认值为0
    var count = 0 //初始化值     定义箭头点击的时候的初始化小圆点的值
    var cirlceNum = 0 //初始化值   定义小圆点跟随变化值
    // 1 动态创建小圆点  数量跟上面图片的一样
    var lis = $('.box>ul>li')
    $(lis).each(function (index, ele) {
        $('ol').append($(`<li>${index+1}</li>`))

    })

    //  追加元素
    $('ol>li').eq(0).addClass('current')


    /*
      一  鼠标移入图片 左右小箭头显示 离开的时候左右小箭头隐藏
      二  点击左右小箭头实现图片滚动
      三  点击小圆点 实现图片滚动(并且当前小圆点高亮)
      四  自动轮播 
      五  鼠标移入图片 停止自动轮播 离开的时候开启自动轮播
        
    */


    //  一  鼠标移入图片 左右小箭头显示 离开的时候左右小箭头隐藏(初始化左右小箭头隐藏)
    //1 获取box  
    //获取box的宽度

    var boxWidth = $('.box').outerWidth()

    //2 绑定鼠标移入事件
    $('.box').hover(function () {
        // 3 获取箭头元素
        $('.arrow').show()


    // 五  鼠标移入图片 停止自动轮播 离开的时候开启自动轮播

    // 鼠标移入图片 停止自动轮播  清除定时器

        clearInterval(timerId)

    }, function () {
        $('.arrow').hide()  //隐藏左右箭头

     //开启定时器
      timerId=   setInterval(function(){
           $('.right')[0].click()  //调用执行右箭头的点击事件(原生dom click执行)
       },1000)



    })




    //无缝滚动

//   克隆第一个li 
    var new_clone_li = $('ul>li').eq(0).clone()
    $('ul').append(new_clone_li)

    //   二  点击左右小箭头实现图片滚动
    // 2.1 给右边箭头绑定点击事件


    $('.right').click(function () {
        var leng = $('ul>li').length
        if (count == leng - 1) {
            count = 0;

            $('ul').css({
                'left': 0
            })

        }
        count++;
        var leftWidth = -count * boxWidth

        $('ul').animate({
            left: leftWidth
        }, 500)

        cirlceNum++; //确定当前小圆点是哪个

        if (cirlceNum == leng - 1) {
            cirlceNum = 0
        }

          //这个函数只负责高亮 不负责移动图片
        $('ol>li').eq(cirlceNum).addClass('current').siblings().removeClass('current')


    })







    //2.2  左边 箭头 实现图片滚动 
    // 1 count--  如果为第0张  那么瞬间跳到最后一张
    //  2 小圆点高亮跟随


        $('.left').click(function () {
        var leng = $('ul>li').length
        if (count == 0) {
            count =leng-1 
            console.log(count)
        

            $('ul').css({
                'left': -count*boxWidth
            })

        }

        count--;
    
        


        var leftWidth = -count * boxWidth
        $('ul').animate({
            left: leftWidth
        }, 500)

        
        if (cirlceNum == 0) {
            cirlceNum =leng-1 
        }
        cirlceNum--; //确定当前小圆点是哪个
          //这个函数只负责高亮 不负责移动图片
        $('ol>li').eq(cirlceNum).addClass('current').siblings().removeClass('current') 
    })










    //  三  点击小圆点 实现图片滚动(并且当前小圆点高亮)

    $('ol>li').click(function () {
        $(this).addClass('current').siblings('li').removeClass('current')

        //给每个小圆点动态生成自定义属性
        myIndex = $(this).index() //  获取自定义索引
        //判断当前是哪个小圆点高亮
        count = myIndex;     //全局跟随左右箭头
        cirlceNum = myIndex  //  全局跟随小圆点高亮
        var leftWidth = -myIndex * boxWidth

        $('ul').animate({
            left: leftWidth
        }, 500)

    })


    //   四  自动轮播 

    //具体怎么移动图片（从左往右）

     var timerId=   setInterval(function(){
        //    $('.right')[0].click()  //调用执行右箭头的点击事件(原生dom click执行)
     
        $('.right').trigger('click')  //触发原生的事件
     
       },1000)



})